<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Load plotly.js into the DOM -->
    <script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
    <title>Document</title>
</head>

<body>
    <div id='myDiv'>
        <!-- Plotly chart will be drawn inside this DIV -->
    </div>
</body>

</html>
<script>
    //生成模拟数据
    var size = 100, x = new Array(size), y = new Array(size), z = new Array(size), i, j;
    for (var i = 0; i < size; i++) {
        x[i] = y[i] = -2 * Math.PI + 4 * Math.PI * i / size;
        z[i] = new Array(size);
    }
    for (var i = 0; i < size; i++) {
        for (j = 0; j < size; j++) {
            var r2 = x[i] * x[i] + y[j] * y[j];
            z[i][j] = Math.sin(x[i]) * Math.cos(y[j]) * Math.sin(r2) / Math.log(r2 + 1);
        }
    }

    var data = [{
        z: z,
        x: x,
        y: y,
        type: 'contour', //等值线图需要设置type为‘contour’
        // ncontours: 12,   //等值线密度,数值越大密度越高
        showscale: false, //控制尺度表是否显示,默认true
    }
    ];

    //图形和轴标题
    var layout = {

        xaxis: {
            visible: false  //是否显示坐标轴，默认为 True，当设置为 False 时隐藏坐标轴，但是依旧可以进行拖拽。
        },
        yaxis: {
            visible: false  //是否显示坐标轴，默认为 True，当设置为 False 时隐藏坐标轴，但是依旧可以进行拖拽。
        }
    };

    Plotly.newPlot('myDiv', data, layout, { displayModeBar: false });  //{displayModeBar: false}完全删除模式栏,
    //Plotly.newPlot('myDiv', data, layout, { displaylogo: false }, { modeBarButtonsToRemove: ['sendDataToCloud', 'hoverCompareCartesian'] });  //允许指定每个按钮是否删除。


</script>